<template>
    <div id="postInfo">
        <div class="breadcrumb ">
          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item>
                <a href="http://localhost:8081/#/index/orderList"><el-tag>订单管理</el-tag></a>
            </el-breadcrumb-item>
             <el-breadcrumb-item>
                <el-tag>发布采购信息</el-tag>
              </el-breadcrumb-item>
          </el-breadcrumb>
        </div>
        <div class="form">
            <el-form ref="form" :model="form" label-width="80px">
              <el-form-item label="订单号">
                <el-input v-model="form.bianhao" :disabled="true"></el-input>
              </el-form-item>
              <!-- <span style="font-size:0.09rem;margin-left:0.5rem;">采购列表</span> -->
              <h6 style="font-size:0.09rem;margin-left:0.3rem;">采购清单:</h6>
               <el-table
                  :data="tableData"
                  style="width: 700px;margin-left:30px;margin-top:0.1rem;margin-bottom:0.5rem;"
                  height='250'>
                  <el-table-column
                    prop="xuhao"
                    label="序号"
                    width="80">
                  </el-table-column>
                  <el-table-column
                    prop="vname"
                    label="蔬菜名"
                    width="100">
                  </el-table-column>
                  <el-table-column
                    prop="num"
                    label="数量(/斤)"
                    width="100">
                  </el-table-column>
                 <el-table-column
                    prop="gname"
                    label="供应商"
                    width="100">
                  </el-table-column>
                 <el-table-column
                    prop="phone"
                    label="供应商手机号码"
                    width="100">
                  </el-table-column>
                  <el-table-column
                    prop="email"
                    label="供应商邮箱"
                    width="100">
                  </el-table-column>
                  <el-table-column
                    prop="dizhi"
                    label="供应商地址"
                    width="100">
                  </el-table-column>
                </el-table>
              <el-form-item label="收货人">
                <el-input v-model="form.username" :disabled="true"></el-input>
              </el-form-item>
              <el-form-item label="收货人手机">
                <el-input v-model="form.mobile" :disabled="true" ></el-input>
              </el-form-item>
              <el-form-item label="可获积分">
                <el-input v-model="form.jifen"  style="width:1.5rem"></el-input>
              </el-form-item>
               <el-form-item>
                  <el-button type="primary" @click="onSubmit(form.bianhao,form.token,form.jifen)">立即发布</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>
<script>
import { getOrder,getOrderDetail,postInfo,btnStatus} from './../../../../service/api/index.js'
  export default {
    data() {
      return {
           form:{
             bianhao:'',
             username:'',
             mobile:'',
             jifen:'',
             token:''
           },
          tableData: [],

      };
    },

    mounted(){
      // console.log(this.$route);
       this.form.bianhao=this.$route.query.bianhao;
       this.form.token=this.$route.query.token;
        
    },
            created(){
                 //请求网络数据   调用getVegetables返回promise对象，然后可以调用promise的then方法，返回请求到的数据(response.data)  
                  getOrder(this.$route.query.token).then((response)=>{
                            console.log(response);
                        this.form.username=response.username;
                        this.form.mobile=response.mobile;
                 }).catch(error=>{
                       // todo......
                      console.log(error);
                 })   //---catch


                  getOrderDetail(this.$route.query.bianhao).then((response)=>{
                            console.log(response);
                            this.tableData=response.data;

                 }).catch(error=>{
                       // todo......
                      console.log(error);
                 })   //---catch

            }, // ----created
    methods: {
      async onSubmit(bianhao,token,jifen) {
           //  //console.log(this.form.vname);
           // let result = await addGongyingshang(this.form.gname,this.form.phone,this.form.email,this.form.dizhi);      
           //  console.log(result);
             //console.log(jifen);
             //立即发布
             let result = await postInfo(bianhao,token,jifen);
              //console.log(result);
             //改变发布按钮为禁用
              if (result.status===200) {
                   let res = await btnStatus(bianhao);
                //   console.log(res);
                      if (res.status===200) {
                           this.$message({
                               message:"发布成功",
                               type:'success',
                           });
                           this.$router.push({name:'orderList'});
                           window.location.reload();
                      }
              }
              
        }
    }
  }
</script>>
<style lang="less" scoped>
   #postInfo{
     width:100%;
     height:100%;
     background-color:#f5f5f5;
     z-index: 99;
     position: absolute;
     top:0.1px;
     right:1px;
   }

    .breadcrumb {
     margin-right: 0.2rem;
     margin-left: 0.2rem;
     margin-top: 0.1rem;
     margin-bottom: 0.1rem;
     background-color:white;
     padding: 0.06rem;
     height:0.6rem;
     border-radius: 4px
   }
    
    .form{
      margin-left: 4rem;
      margin-right: 4rem;
   }

</style>